<template>
  <div>
    <div class="search" :class="{'fixed': fixed}">
      <input type="text" class="search-input" placeholder="搜索招聘会, 心仪公司或职位">
      <span class="search-icon">
        <i class="fa fa-search" style="font-size:24px"></i>
      </span>
      <button>搜索</button>
    </div>
    <a v-show="fixed" class="backTop" href="#">
      <i class="fa fa-arrow-up" style="font-size:32px;color:#318dd4"></i>
    </a>
  </div>
</template>

<script>
export default {
  name: 'Home-search',
  data () {
    return {
      fixed: false
    }
  },
  methods: {
    debounce (fn, delay) {
      let timer
      return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
          fn()
        }, delay)
      }
    },
    showTop () {
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      if (scrollTop > 113) {
        this.fixed = true
      } else {
        this.fixed = false
      }
    }
  },
  mounted () {
    window.onscroll = this.showTop
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/animate.min.css";

.backTop {
  position: fixed;
  bottom: 40px;
  right: 40px;

  &:hover {
    cursor: pointer;
  }
}

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 5px 0 10px 1px rgba(0, 0, 0, .4);

  .search-input {
    width: 75%;
    animation: bounce .6s linear;
  }

  background: linear-gradient(to right, #00b4db, #0083b0);
}

.search {
  height: 90px;
  line-height: 90px;
  background-color: #ffffff;
  padding-left: 100px;
  z-index: 10;
  transition: .4s linear;

  input {
    width: 80%;
    height: 40px;
    padding: 0;
    outline: none;
    border-radius: 5px;
    border: 1px solid #cccccc;
    text-indent: 8px;
    color: #666666;

    &:hover {
      border: 1px solid pink;
    }
  }

  .search-icon {
    display: inline-block;
    transform: translate(-150%, 5px);

    i {
      color: #cccccc;

      &:hover {
        cursor: pointer;
      }
    }
  }

  button {
    width: 80px;
    height: 40px;
    background-color: #318dd4;
    color: #ffffff;
    border: none;
    outline: none;
    margin-left: 8px;
    border-radius: 5px;

    &:hover {
      color: pink;
      cursor: pointer;
      background-color: #318dd0;
    }
  }
}
</style>
